<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
      #obox{
        width: 200px;
        height: 200px;
        background: #000;
      }
    </style>
</head>
<body>
<div id="app">
  <p v-bind:id="ID"></p>
</div>

<div id="app1">
  <p v-bind:class="{left:a,right:b}"></p>
</div>

<div id="app2">
    <p v-bind:style="{background: a, width: b,  height: c}"></p>
</div>

<div id="app3">
    <p v-bind:style="[a,b,c]"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      ID: "obox"
    }
  });

  let vm1 = new Vue({
    el: "#app1",
    data:{
      a: true,
      b: true
    }
  })

  let vm2 = new Vue({
      el: "#app2",
      data:{
          a: "pink",
          b: "200px",
          c: "200px"
      }
  })

  let vm3 = new Vue({
      el: "#app3",
      data:{
          a: {background: "#f3ba3d"},
          b: {width: "200px"},
          c: {height: "200px"}
      }
  })

</script>
</body>
</html>